<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TA交易结算</title>
    <!--导入layui包-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/font.css">
</head>
<body>
<blockquote class="layui-elem-quote news_search">
    <!--数据表格-->
    <table class="layui-hide" id="secStockTable" lay-filter="secStockList"></table>

    <script type="text/html" id="secStock_search">
        <!--多条件查询层-->
        <div style="float: left">
            <form class="layui-form layui-col-md12 x-so">
                类型 :
                <div class="layui-input-inline">
                    <select name="tranType" id="tranType">
                        <option value="">请选择类型</option>
                        <option value="1">认购</option>
                        <option value="2">申购</option>
                        <option value="3">赎回</option>
                        <option value="4">基金成立</option>
                    </select>
                </div>
                状态:
                <div class="layui-input-inline">
                    <select name="tranStatus" id="tranStatus">
                        <option value="">请选择状态</option>
                        <option value="-1">未结算</option>
                        <option value="1">已结算</option>
                    </select>
                </div>
                <button id="search" class="layui-btn  layui-btn-primary layui-bg-gray" lay-submit data-type="reload"
                        lay-filter="provinceSearch">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </form>
        </div>
        <!--多条件查询结束-->

        <!--头部工具栏-->
        <div class="layui-btn-container layui-input-inline" style="margin-left: 900px;top: -40px;">
            <button class="layui-btn layui-btn-normal" lay-event="account">
                <i class="layui-icon">&#xe654;</i>结算
            </button>
            <!--<button class="layui-btn layui-btn-normal" lay-event="batchDel">
                未结算
            </button>
            <button class="layui-btn layui-btn-normal" lay-event="add">
                <i class="layui-icon layui-icon-ok"></i>已结算
            </button>-->
        </div>
    </script>


    <!-- 行中操作按钮[仅对本行操作] -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="delete">删除</a>
    </script>

    <!--脚本代码-->
    <script type="text/javascript">
        layui.use(['table','layer','form','laypage','util','jquery'],function () {
            //导入模块并得到模块对象
            var table = layui.table,//表格对象
                layer = layui.layer,//弹层对象
                form = layui.form,//表单对象
                laypage = layui.laypage,//分页组件
                $ = layui.jquery,//jquery对象
                util = layui.util;//工具对象
            //渲染表格对象
            table.render({
                //id:"houseReload",//为多条件搜索重新加载使用
                elem: "#secStockTable",//表格对象
                url: "/TATrabsaction/TAT",//后台服务路径
                method: "get",//提交方式
                height:740,
                toolbar: "#secStock_search",//表格上方普通工具栏
                //一页显示5条数据
                limit: 15,
                cols: [
                    [
                        {checkbox:true},//开启多选框
                        {field:"dataId",title:"TA交易编号",align:"center"},
                        {field:"fundName",title:"基金名称",align:"center"},
                        {field:"accName",title:"现金账户名称",align:"center"},
                        {field:"price",title:"单价",align:"center"},
                        {field:"numbers",title:"交易数量",align:"center"},
                        {field:"sumMoney",title:"总金额",align:"center"},
                        //如果需要注意日期格式化
                        {field:"dates",title:"交易日期",align:"center",templet:function(d){
                            return util.toDateString(d.dates,"yyyy-MM-dd");}},
                        {field:"tranType",title:"类型",align:"center",sort:true,templet:function (d) {
                                if (d.tranType==1){
                                    return "认购";
                                }else if(d.tranType==2){
                                    return "申购";
                                }else if(d.tranType==3){
                                    return "赎回";
                                }else if (d.tranType==4){
                                    return "成立基金";
                                }
                            }},
                        {field: 'tranStatus', title: '状态',templet:function (d) {
                            if (d.tranStatus==-1){
                                return "<span style='color: #FD482C;'>未结算</span>";
                            }else if(d.tranStatus==1){
                                return "<span style='color: #9BCA63;'>已结算</span>";
                            }
                        }},
                        {fixed:"right",title:"操作",width:160,align:"center",toolbar:"#barDemo"}
                    ]
                ],
                page: true,
                //一页选择显示5或10条数据
                limits: [5, 10,20,30,50]
            });

            // 表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
            table.on('toolbar(secStockList)', function(obj) {
                //检查表格选择操作状态
                var checkStatus = table.checkStatus(obj.config.id);
                //判断事件event值
                switch(obj.event) {
                    /*case 'add':
                        //请求方式为post
                        method="post";
                        //清空表单
                        $("#secStockForm")[0].reset();
                        layer.open({
                            type:1,//外部页面为2，内部层1
                            title:"<i class=\"layui-icon\">&#xe61f;</i>添加证券库存",
                            area:["40%","90%"],
                            shade:0.4,
                            content:$("#data-main").html()
                        });
                        //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                        $("input[name='secId']").prop("readonly",false);
                        break;*/
                    case 'account':
                        //获得选中的表格行
                        var data = checkStatus.data;
                        //判断是否大于0行
                        if(data.length>0){
                            layer.confirm("是否结算", function (index) {
                                //获取所有选择的id
                                var dataIdStr="";

                                for (var i = 0; i < data.length; i++) {
                                    dataIdStr = dataIdStr+data[i].dataId+",";//累加字符
                                }
                                //去掉最后多余的逗号
                                //dataIdStr=dataIdStr.substring(0,dataIdStr.length-1);
                                layer.close(index);
                                $.ajax({
                                    type: "post",
                                    url: "/TATrabsaction/allocation/"+dataIdStr,//后台Servlet路径
                                    data: JSON.stringify(data.field),
                                    dataType:"text",
                                    contentType:"application/json;charset=utf-8",
                                    success: function (msg) {
                                        //重新加载表格数据
                                        table.reload('secStockTable');
                                        layer.msg(msg);
                                    }
                                });
                            });
                        }else{
                            //没有选择数据行
                            layer.msg('请至少选一行！');
                        }
                        break;
                }
            });

            //监听表格行工具(操作)事件 [不能和前面写在一起，原因二者参数有区别：前者toolbar，这里为tool]
            table.on("tool(secStockList)",function (obj) {
                //得到表格行数据
                var data=obj.data;
                //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,
                // 此处使用if梯形结构)
                //判断是否为行修改操作
                if(obj.event == "update"){
                    //将设置请求方式为put
                    method="put";
                    //设置界面信息
                    layer.open({
                        type: 1,
                        title:'<i class="layui-icon">&#xe642;</i>修改证券库存',
                        area: ["40%","90%"],
                        shade: 0.4,
                        content: $("#data-main").html()
                    });
                    //将当前行数据显示在表单各字段中
                    form.val("secStockFormTest", {
                        "fundName": data.fundName,
                        "dataId":data.dataId,
                        "caId":data.caId,
                        "price":data.price,
                        "numbers":data.numbers,
                        "sumMoney":data.sumMoney,
                        "dates":data.dates,
                        "tranType":data.tranType,
                        "tranStatus":data.tranStatus
                    });
                    //将主键设置成只读:不允许修改
                    $("input[name='dataId']").prop("readonly","readonly");
                }else if(obj.event=="delete"){
                    layer.confirm("真的删除Ta交易编号为"+data.dataId+"这行数据吗?", function(index){
                        //执行表格中删除操作
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            type: "delete",
                            url: "/TATrabsaction/TAT/"+data.dataId,//后台Servlet路径
                            success: function(msg){
                                //重新加载表格数据
                                table.reload('secStockTable');
                                layer.msg(msg);
                            }
                        });
                    });
                }
            });


            //多条件搜索
            //搜索表单中提交按钮的事件代码
            form.on("submit(provinceSearch)",function (data) {
                //定义表单数据对象
                var formData=data.field;
                //得到表单数据json字符串
                var json=JSON.stringify(data.field);
                //alert(json);
                //重新加载表格对象
                table.reload("secStockTable",{
                    //页码
                    page:{
                        curr:1
                    },
                    //条件数据，会带到后台
                    where:{
                        tranType:formData.tranType,
                        tranStatus:formData.tranStatus
                    }
                });
                return false;
            });
        });
    </script>
</blockquote>
</body>
</html>